<template>
  <!-- header部分 -->
    <header>
        <p>门店信息</p>
    </header>


  <!-- 门店logo部分 -->
    <div class="business-logo">
        <img :src="shop.shopImage">
    </div>

  <!-- 门店信息部分 -->
    <div class="business-info">
        <h1>{{shop.shopName}}</h1>
        <p>{{shop.shopDescription}}</p>
    </div>

  <!-- 食品列表部分 -->
    <ul class="food">
        <template v-for="item in foodList">
            <li>
                <FoodItem
                        :food="item"
                        :shopId="shop.id"
                        :itemQuantity="getItemQuantity(item)"
                        @updateCart="updateCart"
                />
            </li>
        </template>
    </ul>


<!--    购物车-->
  <Cart
          :cart="lineItemList"
          :shopId="shopId"
  />
</template>

<script setup>
import FoodItem from "../components/FoodItem.vue";
import Cart from "../components/Cart.vue";
import {useCartStore} from "../store/cart.js";
import {userOrderStore} from "../store/unpaidOrder.js";
import {useRoute} from "vue-router";
import {computed,onMounted, reactive, ref} from "vue";
import {
    getShopByIdAPI,
    getShopItemByShopWithCustomerAPI,
    getOrderByShopAPI
} from "../api/api.js";
import {getSessionStorage} from "../common.js";
const cartStore = useCartStore()
const orderStore = userOrderStore()
const  shop = ref({})
const foodList = reactive([])
//定义购物车列表
const cart = reactive([])
//定义节流阀
const isRequest = ref(false)
const token  = getSessionStorage("user").token
//用户在目前门店未支付的订单
const orderId = ref("")
const orderInfo = ref({})
const lineItemList = reactive([])
//定义获取未支付订单细则的方法
const getUnpaidOrder = (shopId)=>{
    getOrderByShopAPI(token,shopId).then(res=>{
        if (res.data.data !== null){
            lineItemList.splice(0,lineItemList.length)
            lineItemList.push(...res.data.data.lineItemDTOS)
            orderId.value = res.data.data.id
            //加入状态管理
            orderStore.setOrderInfo(res.data.data)
            //下面是订单细则管理
            // console.log(orderStore.orderInfo)
        }else {
            orderStore.setShopId(shopId)
        }
    })
}



//定义计算属性
const getItemQuantity = computed(() => (Item) => {
    const quantity = ref(0)
    const index = lineItemList.findIndex(lineItem => Item.id === lineItem.shopItemId)
    if (index === -1){
        return quantity.value;
    }else {
        quantity.value = lineItemList[index].quantity
        return quantity.value
    }
})

const route = useRoute()
const shopId = route.params.shopId
onMounted(async ()=>{

    const data = new FormData()
    data.append("id",shopId)

    await getShopByIdAPI(getSessionStorage("user").token,data).then(res=>{
        shop.value = res.data.data
    })

    await getShopItemByShopWithCustomerAPI(getSessionStorage("user").token,shopId).then(res=>{
        foodList.splice(0,foodList.length)
        foodList.push(...res.data.data)
    })

    await getUnpaidOrder(shopId)


})

//更新购物车：
const updateCart = (lineItem)=>{
    orderStore.updateLineItem(lineItem)
    lineItemList.splice(0,lineItemList.length)
    lineItemList.push(...orderStore.getLineItems())
}
</script>

<style scoped>
/****************** header部分 ******************/
header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}
/****************** 商家logo部分 ******************/
.business-logo{
    width: 100%;
    height: 35vw;
    /*使用上外边距避开header部分*/
    margin-top: 12vw;

    display: flex;
    justify-content: center;
    align-items: center;
}
.business-logo img{
    width: 40vw;
    height: 30vw;
    border-radius: 5px;
}
/****************** 商家信息部分 ******************/
.business-info{
    width: 100%;
    height: 20vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.business-info h1{
    font-size: 5vw;
    margin-bottom: 0;
}
.business-info p{
    font-size: 3vw;
    color: #666;
    margin-top: 1vw;
    margin-bottom: 0;
}
.food{
    width: 100%;
    /*使用下外边距避开footer部分*/
    margin-bottom: 14vw;
}
.food li{
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>